<!--
  module - OA用户管理--- 角色组件

  @author mengft 2020-05-15
-->
<template>
  <div class="mixin-components-container">
    <el-dialog
      v-model="dialogTableVisible"
      title="请选择角色"
      :visible.sync="sonDialog"
      append-to-body="true"
      @close="closeDialog()"
    >
      <!-- start 列表 -->
      <el-table
        ref="singleTable"
        v-loading="listLoading"
        highlight-current-row
        :data="list"
        border
        height="450"
        style="width: 100%;margin-top:15px;"
        :fit="true"
        @current-change="handleCurrentChange"
      >
        <el-table-column type="index" width="50" label="#" align="center" />
        <el-table-column label="角色名称" prop="roleName" :width="350" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="用户数" prop="userNum" :width="200" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="是否锁定" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isAdmin" type="success" icon="el-icon-check" size="mini" circle />
            <el-button v-else type="info" icon="el-icon-check" size="mini" circle />
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top:15px;">
        <!-- start 分页 -->
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" style="text-align:right;" @pagination="queryUserList" />
        <!-- end 分页 -->
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-link type="info" size="mini" @click="closeDialog">取 消</el-link>
        <el-link type="primary" size="mini" @click="subBind">绑 定</el-link>
        <!-- <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="subBind">绑 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
// api
import { queryRoleList } from '@/api/userAndRole/sysRightsRole'
import { addThirdUserRelation } from '@/api/third/thirdUser'
// 水波纹插件
import waves from '@/directive/waves'
// 分页
import Pagination from '@/components/Pagination'

export default {
  name: 'BindRole',
  components: { Pagination },
  directives: { waves },
  props: {
    userId: {
      type: String,
      default: function() {
        return ''
      }
    },
    dialogTableVisible: {
      type: Boolean,
      default: function() {
        return true
      }
    }
  },
  data() {
    return {
      activeIndex: '1',
      total: 0,
      list: [],
      listLoading: false,
      leftWide: 24,
      rightWide: 0,
      roleUserId: '',
      roleUserName: '',
      listQuery: {
        page: 1,
        limit: 10,
        roleName: ''
      },
      count: 0,
      sonDialog: false,
      clickRoleId: ''
    }
  },
  watch: {
    // 监听dialog的开关
    dialogTableVisible(val, oldVal) {
      this.sonDialog = this.dialogTableVisible
    }
  },
  created() {
    this.queryUserList()
  },
  methods: {
    queryUserList() {
      const curVue = this
      const query = {
        page: curVue.listQuery.page,
        limit: curVue.listQuery.limit,
        name: curVue.listQuery.roleName
      }
      queryRoleList(query).then(res => {
        if (res.code === 1) {
          curVue.listLoading = false
          curVue.list = res.data.roleList
          curVue.total = res.data.totalCount
        } else {
          curVue.noticeUtil.errorMsg('角色获取失败！')
        }
      })
    },
    search() {
      this.queryUserList()
    },
    closeDialog() {
      this.$emit('dialogTableVisible')
    },
    handleCurrentChange(row) {
      this.clickRoleId = row.roleId
    },
    subBind(row) {
      const curVue = this
      if (curVue.clickRoleId === '') {
        curVue.noticeUtil.errorMsg('请先选择一个角色')
        return
      }
      addThirdUserRelation({ thirdUserId: curVue.userId, roleId: curVue.clickRoleId }).then(res => {
        if (res.code === 1) {
          this.$emit('dialogTableVisible')
          // this.$refs.singleTable.setCurrentRow(row)
          curVue.$emit('queryThirdUserList', '')
        } else {
          curVue.noticeUtil.errorMsg(res.mesg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar{
  position: relative;
  z-index: 2000;
  width: 100%;
  .base-condition{
    padding: 0 40px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.14);
    .el-menu-demo,.el-menu-demo *{
      line-height: 50px;
      height: 50px;

      .el-menu-item{
        padding: 0 8px;
        margin-right: 20px;
      }
    }
  }
  .more-condition{
    position: absolute;
    top: 65px;
    background: #fff;
    width: 100%;
    height: auto;
    padding: 20px 40px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.14);
  }
  .query-result{
    margin-top: 5px;
    font-size: 12px;
    color: #4c596e;
    padding: 15px 30px;
    background: #fbfdff;
  }
  .query-result *{
    line-height: 25px;
  }
  .filter-item{
    display: inline-block;
    padding: 0 10px;
    margin-left: 10px;
    border-radius: 12px;
    background: #e5e9f2;
    color: #7f8997;
  }
  .filter-item i{
    margin-left: 5px;
    font-weight: 700;
    cursor: pointer;
  }

}
.radius-input >>> input{
  border-radius: 100px !important;
}
</style>
<style scoped>
.radius-input >>> input{
      border-radius: 100px !important;
    }
</style>
